<template>
	<view class="box">
		<uv-navbar leftIcon="" title="懒学青年" bgColor="transparent" placeholder>
		</uv-navbar>
		<apiCity ref="picker" @onConfirm="(e)=>opt_address(e)"></apiCity>
		<uv-sticky bgColor="transparent">
			<view style="background: linear-gradient(to right,#cbf2fc 0%,#e6edfc 100%);">
				<view class="topBox">
					<uv-row justify="space-between" customStyle="margin-bottom: 10px">
						<uv-col span="3.7">
							<view class="mapBox" @click="picker.open()">
								<view>
									<image src="@/static/img/tu.png" class="tuImg">
									</image>
								</view>
								<view>
									<view>{{ address?.name ||'地区' }}</view>
								</view>
								<view style="margin-top:2rpx;"><uv-icon name="arrow-down-fill" size="12"
										color="#000"></uv-icon></view>
							</view>
						</uv-col>
						<uv-col span="8.3">
							<uv-search placeholder="搜索" @blur="opt_name" bgColor="#fff" shape="square"
								:showAction="false" :animation="false" v-model="name"></uv-search>
						</uv-col>
					</uv-row>
				</view>
			</view>
		</uv-sticky>
		<DragButton>
			<uv-button open-type="contact" :customStyle="{borderRadius:'99rpx 0 0 99rpx '}" color="#31c0ed">
				<image class="logo" src="@/static/img/icon10.png"
					style="width: 60rpx; height: 60rpx; margin-right: 10rpx; vertical-align: middle;">
				</image><text style="font-size:26rpx;">课程顾问</text>
			</uv-button>
		</DragButton>
		<view class="content" :style="`height: calc(100vh - ${cHeight});`">

			<uv-vtabs :list="list" :height="height" :hdHeight="hdHeight" :barScrollable='false'>
				<template v-for="(items,indexs) in list" :key="indexs">

					<uv-vtabs-item :index="indexs">
						<view class="name">{{items.name}}</view>
						<view class="content-section">
							<view class="sectionBox" v-for="(item,index) in items.childrens" :key="index"
								@click="route('pages/lesson/lessonIntro',{id:item.id})">
								<view class="topBanner">
									<image :src="imgUrl(item?.cover?.[0]?.url)"
										style="width: 100%; height: 250rpx;border-radius:12rpx 12rpx 0 0">
									</image>
								</view>
								<view class="textBox">
									<view class="title">{{item.title}}</view>
									<view class="txtAdd01">{{item?.schools[0]?.name}}</view>
									<view class="schoolBox">
										<view class="txtPrice">&yen;{{item.price}}</view>
										<view class="txtNumber">已报名{{item.real_sales+item.sales}}人</view>
										<button class="blueBtn" v-if="item.is_buy=='1'">立即购买</button>
										<button class="blueBtn" v-if="item.is_buy=='0'">立即预约</button>
									</view>
								</view>
							</view>

							<view class="empty" v-if="items?.childrens?.length == 0">
								<image class="image" src="@/static/img/empty.png" mode="aspectFill"></image>
							</view>

						</view>

					</uv-vtabs-item>

				</template>
				<view style="height: 100vh;"></view>
			</uv-vtabs>


		</view>
	</view>
</template>

<script setup lang="ts">
	import route from '@/utils/route';
	import { toast, imgUrl } from '@/utils/fun';
	import DragButton from '@/components/dragon-dragButton/index.vue'
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { ref, nextTick, computed } from 'vue';
	import { http, apiPath } from '@/common/http/index';
	import apiCity from '@/components/uni-city/uni-apiCity.vue';
	// import list from '@/components/list';
	import { userStorage } from '@/hooks/useStorage';
	const { getStorage, setStorage, removeStorage } = userStorage();
	import { onPullDownRefresh } from '@dcloudio/uni-app'
	onPullDownRefresh(() => {
		get_info();
		uni.stopPullDownRefresh();
	});
	onShow(() => {
		get_info()
	});
	//「地址选择器」「地址」「搜索」「菜单」「分页」  「菜单id」
	const [picker, address, name, menu, refList, category_id, area, Bindex
		, cityId, areaId, proId, list] = [ref(), ref({}), ref(), ref(), ref(), ref(), ref(), ref(0), ref(), ref(), ref(), ref()];
	const get_info = async () => {
		// menu.value = (await http.get('/api/v1/category')).data;//获取左侧菜单
		// category_id.value = menu.value[0].id;
		let sto_address = getStorage('address')
		if (sto_address) {
			console.log(sto_address)
			address.value = JSON.parse(sto_address)
		} else {
			let area = (await http.get('/api/v1/default/address')).data;//获取左侧菜单
			console.log('area', area)
			address.value = { name: area.area, area_id: area.area_id, province_id: area.area_id, city_id: area.city_id };
			setStorage('address', address.value)
		}

		get_list()


	};



	//获取分页
	const get_list = async () => {

		let params = {
			name: name.value,
			area_id: address.value?.area_id,
			province_id: address.value?.province_id,
			city_id: address.value?.city_id

		}

		list.value = (await http.get('/api/v1/product/list', { params })).data;//获取左侧菜单

		console.log(list.value)

	};
	// const opt_menu = (id : any, index : any) => {
	// 	category_id.value = id;//切换 
	// 	Bindex.value = Number(index)
	// 	get_list()
	// }
	const opt_address = (e : any) => {
		console.log("222222", e)
		// proId.value = e[0]
		// cityId.value = e[1]
		address.value = e;
		setStorage('address', address.value)
		get_list()
	}
	const opt_name = (e) => {
		console.log(address.value)
		uni.redirectTo({
			url: '/pages/mine/ke?name=' + name.value + '&area=' +
				address.value?.area_id + '&pro=' + address.value?.province_id + '&city=' +
				address.value?.city_id
		})
		// get_list()
	}


	const height = computed(() => {

		const info = uni.getSystemInfoSync();
		if (info.safeAreaInsets && info.safeAreaInsets.bottom > 0) {
			// 有安全区域
			return uni.getSystemInfoSync().windowHeight * 2 - uni.upx2px(300);
		} else {
			// 没有安全区域
			return uni.getSystemInfoSync().windowHeight * 2 - uni.upx2px(270);
		}
	})
	const hdHeight = computed(() => {

		const info = uni.getSystemInfoSync();
		if (info.safeAreaInsets && info.safeAreaInsets.bottom > 0) {
			console.log('有安全区域')
			// 有安全区域
			return '300rpx';
		} else {
			console.log('没有安全区域')
			// 没有安全区域
			return '270rpx';
		}
	})

	const cHeight = computed(() => {

		const info = uni.getSystemInfoSync();
		if (info.safeAreaInsets && info.safeAreaInsets.bottom > 0) {
			console.log('有安全区域')
			// 有安全区域
			return '300rpx';
		} else {
			console.log('没有安全区域')
			// 没有安全区域
			return '270rpx';
		}
	})
</script>

<style lang="scss" scoped>
	:deep(.uv-vtabs) {
		width: 100% !important;
	}

	:deep(.uv-vtabs__content) {
		background: transparent !important;
	}

	.box {
		position: fixed;
		width: 100vw;
		background: linear-gradient(to right, #cbf2fc 0%, #e6edfc 100%);
		height: 100%;
	}

	.serviceFloat {
		z-index: 1;
		font-size: 26rpx;
		position: fixed;
		right: -20px;
		bottom: 10%;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		color: #fff;
		opacity: 1;
		padding: 0 10px;
	}

	.tuImg {
		width: 32rpx;
		height: 32rpx;
		margin-top: 5px;
		margin-right: 5rpx;
	}

	.content {

		display: flex;
		height: calc(100vh - 315rpx);
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 100%);

		border-radius: 28rpx 28rpx 0rpx 0rpx;

		.name {
			padding: 35rpx 30rpx 0rpx 50rpx;
			font-size: 30rpx;
			color: #31C0ED;
			font-weight: bold;
		}
	}

	.nav-bar {
		height: calc(100vh - 320rpx);
		overflow: hidden;
		position: relative;
		width: 150px;
		/* 侧边栏宽度 */
		font-size: 28rpx;
		color: rgba(0, 0, 0, 1);
		border-radius: 28rpx 0rpx 0rpx 0rpx;

		// background: rgba(255, 255, 255, 1);
		.baikuaiup {
			top: -100%;
			position: absolute;
			border-radius: 0 0 28rpx 0rpx;
			background: rgba(255, 255, 255, 1);
			width: 100%;
			height: 100%;
			z-index: 1;
			transition: all .2s;
		}

		.baikuai {
			top: 0;
			position: absolute;
			border-radius: 0 28rpx 0rpx 0rpx;
			background: rgba(255, 255, 255, 1);
			width: 100%;
			height: 100%;
			z-index: 1;
			transition: all .2s;
		}
	}

	.nav-list {
		top: 0;
		position: absolute;
		z-index: 2;
		width: 100%;
	}

	.nav-item {
		width: 100%;
		height: 80rpx;
		padding: 20rpx;
		text-align: center;
		cursor: pointer;
		border-radius: 6px 6px 0 0;
		background: transparent;

		.menu_name {
			// border-left: 4px solid #fff;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			line-height: 44rpx;
		}
	}

	.nav-item.current {
		// background: #EFFAFD;
		border-radius: 0;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		position: relative;

		.menu_name {
			.tit {
				width: 8rpx;
				height: 32rpx;
				background: #31C0ED;
				border-radius: 0rpx 12rpx 12rpx 0rpx;
				position: absolute;
				left: 1%;
				margin-top: 4rpx;
			}

			// border-left: 4px solid #31C0ED;
			// border-radius: 0rpx 12rpx 12rpx 0rpx;
		}

	}

	.content-section {
		// margin-top: 8rpx;
		padding: 0 25rpx 50rpx 50rpx;
		border-radius: 100px;
	}

	.topBox {
		padding: 30rpx 20rpx 20rpx;
	}

	.mapBox {
		/* width: 230rpx; */
		display: flex;
		justify-content: left;
		align-items: center;
		font-size: 28rpx;
	}

	.mapBox view {
		margin-right: 5rpx;
	}

	.sectionBox {
		margin-top: 20rpx;
		background: #fff;
		border-radius: 12rpx;
	}

	.topBanner {
		margin-bottom: 10rpx;
	}

	.textBox {
		padding: 0 25rpx 20rpx;
	}

	.title {
		margin-bottom: 10rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #000000;
	}

	.txtPrice {
		font-size: 28rpx;
		/* font-weight: 700; */
		letter-spacing: 0px;
		line-height: 18px;
		color: rgba(49, 192, 237, 1);
	}

	.txtNumber {
		font-size: 24rpx;
		/* font-weight: 500; */
		color: rgba(153, 153, 153, 1);
	}

	.schoolBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 10rpx;
	}

	.txtSchool {
		font-size: 22rpx;
		line-height: 50rpx;
		color: rgba(0, 0, 0, 1);
	}

	.txtAdd01 {
		font-size: 22rpx;
		line-height: 40rpx;
		color: #999999;
	}

	.blueBtn {
		/* margin: 10rpx 0 0; */
		margin: 0;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		opacity: 1;
		color: #fff;
		padding: 0 20rpx;
		border-radius: 198rpx !important;
		background: #31C0ED;
	}

	::v-deep .blueBtn:after {
		border: none;
		border-radius: 99rpx !important;
	}

	.empty {
		display: flex;
		justify-content: center;
		align-items: center;
		// padding: 120rpx 0 20rpx 0;
		height: calc(100vh - 320rpx);

		.image {
			width: 300rpx;
			height: 300rpx;
			display: block;
		}
	}
</style>